/**
 * @fileoverview   dom/manipulate 操作元素，创建，修改，删除，复制等

 * @date: 11-11-4
 * @time: 上午10:33
 * @author 2kid
 * @version 0.001
 */

/**
 *
 *
 * 方法：
 * dom.create
 * dom.prototype.append
 * dom.prototype.prepend
 * dom.prototype.before
 * dom.prototype.after
 * dom.prototype.remove
 * dom.prototype.clone
 * 方法：
 * dom.query
 *
 */
F.reg('dom/manipulate', function (f, dom) {
    var win = window, doc = win['document'], docElement = doc.documentElement;
    f.extend(dom, {

        /**
         * @name F.Dom.create
         * @function
         * @namespace 创建元素，有两种形式，1.直接使用html格式，2.单个元素如 div。不能创建style，script,link
         * @param {String} html html格式字符串或标签名
         * @param {Object} attr 可选，当为标签名时，可以以键值对的形式添加属性，class属性请用className，
         *                      事件类型，如 onclick直接添加字符串， onclick='alert("")'
         * @return {Object} Dom对象
         * @example
         * 例子：
         * 1.
         * //创建一定div元素，并添加属性
         *  dom.query('body').append(dom.create('div',{style:'width:100px;height:100px;background:#ccc;'}));
         * 2.
         *
         * dom.create('&lt;div&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/div&gt;');
         *
         */
        create:function (html, attr) {
            var ELEM = /^[a-z]+$/,
                elem = [],
                ele,
                eletpl = '<%name %attr></%name>',
                div;
            attr = attr || {};
            //如果 单个元素，转换成innerHTML识别字符串 <div style="background:#ccc;"></div>
            if (ELEM.test(html.toLowerCase())) {
                eletpl = eletpl.replace(/%name/g, html);
                //如果添加了属性，替换成字符串  style='padding:10px;' src='http://i10.topit.me/l098/10098405313188eed9.jpg'
                var atr = '';
                f.each(attr, function (v, k) {
                    if (k === 'className') {
                        k = 'class';
                    }
                    //替换 v中的双引号，避免和外面的冲突
                    v = v.replace(/"/g, '\'');
                    atr += k + '="' + v + '" ';

                });
                //添加属性
                eletpl = eletpl.replace(/%attr/g, atr);

                html = eletpl;

            }
            div = doc.createElement('div');
            html = html.replace(/"/g, '\'');
            div.innerHTML = html;
            //获取html元素
            ele = div.firstChild;
            do {
                if (ele.nodeType === dom.NodeType.ELEMENT_NODE) {
                    elem.push(ele);
                }
            } while (ele = ele.nextSibling);

            div = null;
            return new dom(elem);
        }
    }, true);
    f.extend(dom, {

        /**
         * @name F.Dom.prototype.append
         * @function
         * @namespace  将参数添加到每个匹配元素内容的后面
         * @param html html格式字符串或Dom对象
         * @return {Object} Dom对象
         * @example
         * 例子：
         * 1.
         * &lt;div&gt;&lt;/div&gt;
         * dom.query('div').append('&lt;a href=""&gt;&lt;/a&gt;');
         * //&lt;div&gt;士大夫&lt;a href=""&gt;&lt;/a&gt;&lt;/div&gt;
         */
        append:function (html) {
            this._inject(html, function (ele, frag) {
                ele.appendChild(frag);
            });
            return this;
        },
        /**
         * @name F.Dom.prototype.prepend
         * @function
         * @namespace  将参数添加到每个匹配元素内容的前面
         * @param html html格式字符串或Dom对象
         * @return {Object}   Dom对象
         * @example
         * 例子：
         * 1.
         * &lt;div&gt;士大夫&lt;/div&gt;
         * dom.query('div').prepend('&lt;a href=""&gt;&lt;/a&gt;');
         * //&lt;div&gt;&lt;a href=""&gt;&lt;/a&gt;士大夫&lt;/div&gt;
         *
         */
        prepend:function (html) {
            this._inject(html, function (ele, frag) {
                ele.insertBefore(frag, ele.firstChild);
            });
            return this;
        },
        /**
         * @name F.Dom.prototype.before
         * @function
         * @namespace  将参数添加到每个匹配元素的前面
         * @param html html格式字符串或 Dom对象
         * @return {Object}  Dom对象
         * @example
         * 例子：
         * 1.
         * &lt;div&gt;士大夫&lt;/div&gt;
         * dom.query('div').before('&lt;a href=""&gt;&lt;/a&gt;');
         * //&lt;a href=""&gt;&lt;/a&gt;&lt;div&gt;士大夫&lt;/div&gt;
         */
        before:function (html) {
            this._inject(html, function (ele, frag) {
                ele.parentNode.insertBefore(frag, ele);
            });
            return this;
        },
        /**
         * @name F.Dom.prototype.after
         * @function
         * @namespace  将参数添加到每个匹配元素的后面
         * @param html html格式字符串或 Dom对象
         * @return {Object}  Dom对象
         * @example
         * 例子：
         * 1.
         * &lt;div&gt;士大夫&lt;/div&gt;
         * dom.query('div').after('&lt;a href=""&gt;&lt;/a&gt;');
         * //&lt;div&gt;士大夫&lt;/div&gt;&lt;a href=""&gt;&lt;/a&gt;
         */
        after:function (html) {
            this._inject(html, function (ele, frag) {
                ele.parentNode.insertBefore(frag, ele.nextSibling);
            });
            return this;
        },
        /**
         * @name F.Dom.prototype.remove
         * @function
         * @namespace  删除匹配的元素
         * @return {Object} Dom对象
         * @example
         * 例子：
         * 1.
         * &lt;div&gt;士大夫&lt;a href=""&gt;&lt;/a&gt;&lt;/div&gt;
         * dom.query('div a').remove();
         * //&lt;div&gt;士大夫&lt;/div&gt;
         *
         */
        remove:function () {
            f.each(this.get(), function (ele) {
                ele.parentNode.removeChild(ele);
            });
            return this;
        },
        /**
         * @name F.Dom.prototype.clone
         * @function
         * @namespace  拷贝匹配的元素
         * @return {Object}  Dom对象
         * @example
         * 例子：
         * 1.
         * &lt;div&gt;士大夫&lt;a href=""&gt;aaa&lt;/a&gt;&lt;/div&gt;
         * var a=dom.query('div a').clone();
         * dom.query('div').append(a);
         * //&lt;div&gt;士大夫&lt;a href=""&gt;aaa&lt;/a&gt;&lt;a href=""&gt;aaa&lt;/a&gt;&lt;/div&gt;

         */
        clone:function () {
            var elem = [];
            f.each(this.get(), function (ele) {
                elem.push(ele.cloneNode(true));
            });
            return new dom(elem);
        },
        _inject:function (html, fn) {
            var elem,
                frag = doc.createDocumentFragment();
            if (f.type(html, 'string')) {
                elem = dom.create(html).get();
            } else if (dom.isdom(html)) {
                elem = html.get();
            }
            f.each(elem, function (ele) {
                frag.appendChild(ele);
            });

            f.each(this.get(), function (ele) {
                fn(ele, frag.cloneNode(true));
            });
        }
    });


    return dom;
}, {

});